<template>
	<view>
		<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		
		
		<view  v-show="curNow == 0">
			<u-list>
				<u-list-item v-for="(item, index) in custList" :key="index">

					<u-cell icon="account-fill" :title="item.nickname">
						<view slot="title">
							<u-row>
								<u-col span="4">
									<view class="name">{{item.nickname}}</view>
								</u-col>
								<u-col span="3">
									<view class="">{{item.sex == 1 ? '男' : '女'}}</view>
								</u-col>
<!--
								<u-col span="5">
									 显示图标版  
										<u--text prefixIcon="phone-fill" mode="phone" iconStyle="font-size: 19px"
											:text="item.phone"></u--text>
											  不显示图标版 
										<text :user-select="true">{{item.phone}}</text>
					
								</u-col>
								-->
							</u-row>
						</view>
					</u-cell>
				</u-list-item>
			</u-list>
	</view>
	
	
	<view  v-show="curNow == 1">
		
		<view class="search_box">
		<u-search placeholder="可搜索电话/昵称" v-model="keyword" @search="search_member" :showAction="false"></u-search>
		</view>
			<u-list>
				<u-list-item v-for="(item, index) in searchresult" :key="index">
	
					<u-cell icon="account-fill" :title="item.nickname">
						<view slot="title">
							<u-row>
								<u-col span="4">
									<view class="name">{{item.nickname}}</view>
								</u-col>
								<u-col span="2">
									<view class="">{{item.sex == 1 ? '男' : '女'}}</view> 
								</u-col>
							
								<u-col span="4">
										<text :user-select="true">{{item.phone}}</text>
								</u-col>
								<u-col span="2">
										<u-button text="报名" size="mini" @click="applyevent(item,index)" ></u-button>
								</u-col>
							</u-row>
						</view>
					</u-cell>
				</u-list-item>
			</u-list>
	</view>
		
		
	</view>
	
	
</template>

<script>
	import * as UserApi from '@/api/user.js'
	import * as EventApi from '@/api/event.js';
	export default {
		data() {
			return {
				custList: [],
				searchresult: [],
				curNow: 0,
				keyword:"",
				event_nid:"",
				list: ['已报名'],
				button_show: [],
			}
		},
		onLoad(e) {
			this.event_nid=e.id
			this.getList(e.id)
			this.getUserInfo()
		},
		methods: {
			getList(id) {
				let that = this;
				EventApi.event_member({
					event_nid: id
				}).then(res => {
					that.custList = res.info
				})

			},
			
			
			//切换tab
			sectionChange(index)
			{
				this.curNow = index;
				this.page = 1;
				if (this.curNow == 0) {
					 
				} else if (this.curNow == 1) {
					 
				}  
			},
			
			
			//根据关键词，搜索用户
			search_member()
			{ 
				// console.log("keyword",this.keyword);  
				// console.log("search",this.search); 
				// console.log("value",this.value);  
				// console.log("e",e);
				const searchstr = this.keyword
				
				UserApi.search_member({keyword:searchstr}).then
				(res => 
					{
						console.log("res",res);
						this.searchresult = res.data
					}
				)
				
				console.log("searchresult",this.searchresult);
				
			},
			
			
			applyevent(item,index)
			{
				console.log("item.nid",item.nid)
				console.log("index",index)
				console.log("this.event_nid",this.event_nid)
				//跑一下这个接口，帮他报名了。已经报名了，就提示已经报名，并且把按钮disable
				
			  
							
							EventApi.join({
								user_id: item.nid,
								event_id: this.event_nid, 
							}).then(res => {
								if (res.status == 200) {
									console.log("EventApi.join.res",res)
									//提示报名成功,并且删除报名按钮
									uni.$u.toast('报名成功。')
									//把绑定的index，从搜索结果数组中删除。
									this.searchresult.splice(index, 1);
									console.log("searchresult",this.searchresult)
									
									//刷新以下已经报名的列表
									this.getList(this.event_nid)
									
									
								} else {
									console.log("EventApi.join.res",res)
									this.$error(res.info)
								}
							
							
							})
				
				
				
				
			},
			
			// 获取当前用户信息
			getUserInfo() {
				UserApi.user_info_by_id({
					member_nid: uni.getStorageSync('user_id')
				}).then(res => {
					this.userInfo = res.data
			console.log("this.userInfo",this.userInfo)
					if (this.userInfo.leader == '是') {
			
						console.log("是管理员了")
						this.list=['已报名','代报名']
						//显示第二标签;
					}
				})
			},
			
		}
	}
</script>

<style>
@import url("asset/style.css");
</style>